<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getUserDetail } from '@/api/user/admin'
import { UserItem } from '@/api/user/types'
import { ElMessage } from 'element-plus'

// 定义用户详情数据
const userDetails = ref<UserItem>({
  userId: '',
  phone: '',
  name: '',
  branch: '',
  sex: 3,
  status: 0,
  createdAt: '',
  updatedAt: ''
})

// 性别映射
const sexMap: Record<number, string> = {
  1: '男',
  2: '女',
  3: '未知'
}

// 状态映射
const statusMap: Record<number, string> = {
  0: '禁用中',
  1: '启用中'
}

const route = useRoute()
const userId = route.query.userId || route.params.userId

// 获取用户详情
const fetchUserDetail = async () => {
  try {
    const res = await getUserDetail(userId as string)
    if (res.code === 200) {
      userDetails.value = res.data
    } else {
      ElMessage.error(res.message || '获取用户详情失败')
    }
  } catch (error) {
    ElMessage.error('获取用户详情失败')
  }
}

onMounted(() => {
  fetchUserDetail()
})
</script>

<template>
  <ContentWrap title="顾客详情" message="详情信息">
    <el-descriptions title="顾客详情" :column="2" border>
      <el-descriptions-item label="顾客ID">{{ userDetails.userId }}</el-descriptions-item>
      <el-descriptions-item label="顾客名">{{ userDetails.name }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ userDetails.phone }}</el-descriptions-item>
      <el-descriptions-item label="网点">{{ userDetails.branch }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ sexMap[userDetails.sex] || '未知' }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="userDetails.status === 1 ? 'success' : 'danger'">
          {{ statusMap[userDetails.status] || '未知' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ userDetails.createdAt }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ userDetails.updatedAt }}</el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
</template>

<style scoped>
:deep(.el-descriptions__body) {
  .el-descriptions__table {
    table-layout: fixed;

    .el-descriptions__label {
      width: 30%; /* label 占据 20% 宽度 */
    }

    .el-descriptions__content {
      width: 70%; /* 内容占据 80% 宽度 */
    }
  }
}
</style>